<template>
  <div class="fc">
    <p>
      <span>创作|翻唱</span>
      <van-icon name="arrow" class="ic"/>
    </p>
    <ul>
      <li v-for="(key,item) in name">
        <span><img :src=pic[item] alt=""></span>
        <br>
        <span class="text">
           {{text[item]}}
          </span>
        <p>{{name[item]}}</p>
      </li>
    </ul>
  </div>
</template>

<script>
    export default {
        name: "fanchang",
      data(){
        return{


          pic:[],
          name:[],
          text:[],
        }
      },
      created(){
        this.$http.get('http://localhost:3000/dj/recommend/type?type=2001')
          .then((res)=>{
            for(let i = 0; i < 3; i ++){
              this.pic.push(res.data.djRadios[i].picUrl);
              this.name.push(res.data.djRadios[i].name);
              this.text.push(res.data.djRadios[i].rcmdtext);

            }
          });

      }
    }
</script>

<style lang="scss">
  *{
    margin: 0px;
    padding: 0px;
  }
  .fc{

    box-sizing: border-box;
    padding: 110px 15px 0 15px;
  p{
    box-sizing: border-box;
    padding-bottom: 40px;
    font-size: 50px;
    font-weight: bold;
  span{
    vertical-align: middle;
  }
  .ic{
    width: 27px;
    vertical-align: middle;
  }
  }
  ul{

    font-size: 0;

  li{
    width: 33.3333333%;
    letter-spacing: 0;
    list-style: none;
    position: relative;
    display: inline-block;
    font-size: 30px;
    padding-bottom: 60px;
    box-sizing: border-box;
    p{
      position: absolute;
      bottom: 145px;
      font-size: 30px;
      font-weight: unset;
      opacity: 0.9;
      text-indent: 15px;
      color: white;
    }
    span{
      display: inline-block;
    }
  .text{
    box-sizing: border-box;
    padding-left: 15px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    height: 95px;
    width: 340px;
    font-size: 35px;
  }
  img{
    width: 395px;
    height: 400px;
  }
  }
  }
  }
</style>
